<template>
	<view class="login-container">
		<!-- 增强版背景装饰 -->
		<view class="background-decoration">
			<view class="decoration-circle circle-1"></view>
			<view class="decoration-circle circle-2"></view>
			<view class="decoration-circle circle-3"></view>
			<view class="decoration-circle circle-4"></view>
			<view class="decoration-circle circle-5"></view>
			<view class="floating-particle particle-1"></view>
			<view class="floating-particle particle-2"></view>
			<view class="floating-particle particle-3"></view>
		</view>

		<view class="login-card">
			<!-- 头部区域 -->
			<view class="login-header">
				<view class="logo-container">
					<view class="logo">
						<text class="logo-icon">🛒</text>
					</view>
					<view class="logo-glow"></view>
				</view>
				<text class="title">欢迎登录</text>
				<text class="subtitle">智能零售平台，让购物更智能</text>
			</view>

			<!-- 登录表单 -->
			<view class="login-form">
				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">👤</view>
						<view class="input-container">
							<input class="input" v-model="loginForm.username" placeholder="请输入用户名"
								placeholder-class="placeholder" @focus="onInputFocus('username')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'username' }"></view>
					</view>
				</view>

				<view class="form-row">
					<view class="input-wrapper">
						<view class="input-icon">🔒</view>
						<view class="input-container">
							<input class="input" v-model="loginForm.password" placeholder="请输入密码" password
								type="password" placeholder-class="placeholder" @confirm="handleLogin"
								@focus="onInputFocus('password')" @blur="onInputBlur" />
						</view>
						<view class="input-line" :class="{ active: activeInput === 'password' }"></view>
					</view>
				</view>

				<!-- 忘记密码链接 -->
				<view class="forgot-password" @click="navigateToForgotPassword">
					<text class="forgot-text">忘记密码？</text>
					<view class="forgot-underline"></view>
				</view>

				<!-- 登录按钮 -->
				<button class="login-btn" :loading="loading" @click="handleLogin" :disabled="!canLogin">
					<text class="btn-text">{{ loading ? '登录中...' : '立即登录' }}</text>
					<view class="btn-glow"></view>
					<view class="btn-wave" v-if="!loading"></view>
				</button>

				<!-- 注册链接 -->
				<view class="register-link">
					<text class="register-text">还没有账号？</text>
					<view class="link-container" @click="navigateToRegister">
						<text class="link">立即注册</text>
						<view class="link-underline"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部装饰 -->
		<view class="bottom-decoration">
			<view class="wave wave-1"></view>
			<view class="wave wave-2"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					username: '',
					password: ''
				},
				loading: false,
				activeInput: ''
			}
		},
		computed: {
			canLogin() {
				return this.loginForm.username.trim() && this.loginForm.password.trim() && !this.loading
			}
		},
		methods: {
			onInputFocus(field) {
				this.activeInput = field;
			},

			onInputBlur() {
				this.activeInput = '';
			},

			async handleLogin() {
				if (!this.canLogin) return

				this.loading = true
				try {
					const [error, response] = await new Promise((resolve) => {
						uni.request({
							url: 'http://localhost:8000/api/v1/users/login',
							method: 'POST',
							data: {
								user_name: this.loginForm.username,
								user_password: this.loginForm.password
							},
							timeout: 10000,
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => resolve([null, res]),
							fail: (err) => resolve([err, null])
						})
					})

					console.log('登录响应:', {
						error,
						response
					})

					if (error) {
						console.error('登录请求失败:', error)
						uni.showToast({
							title: '网络请求失败',
							icon: 'none'
						})
						return
					}

					if (response && response.statusCode === 200) {
						const data = response.data
						console.log('登录成功:', data)

						// 保存 token 到本地存储
						if (data.access_token) {
							uni.setStorageSync('token', data.access_token)
							uni.setStorageSync('userInfo', data.user || {
								username: this.loginForm.username
							})

							uni.showToast({
								title: '登录成功',
								icon: 'success'
							})

							// 跳转到首页
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home/home'
								})
							}, 1500)
						} else {
							uni.showToast({
								title: '登录失败：未返回token',
								icon: 'none'
							})
						}
					} else {
						console.error('登录状态码异常:', response?.statusCode)
						const errorMsg = response?.data?.detail || `登录失败: ${response?.statusCode || '未知错误'}`
						uni.showToast({
							title: errorMsg,
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('登录错误:', error)
					uni.showToast({
						title: '登录失败: ' + (error.message || '未知错误'),
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},

			navigateToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},

			navigateToForgotPassword() {
				uni.navigateTo({
					url: '/pages/forgot-password/forgot-password'
				})
			}
		}
	}
</script>

<style scoped>
	.login-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #6A0DAD 0%, #8A2BE2 30%, #9370DB 70%, #DA70D6 100%);
		padding-top: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	/* 增强版背景装饰 */
	.background-decoration {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		animation: float 15s infinite ease-in-out;
	}

	.circle-1 {
		width: 300rpx;
		height: 300rpx;
		top: 10%;
		left: -100rpx;
		animation-delay: 0s;
	}

	.circle-2 {
		width: 200rpx;
		height: 200rpx;
		bottom: 20%;
		right: -50rpx;
		animation-delay: 5s;
	}

	.circle-3 {
		width: 150rpx;
		height: 150rpx;
		top: 50%;
		left: 80%;
		animation-delay: 10s;
	}

	.circle-4 {
		width: 180rpx;
		height: 180rpx;
		top: 70%;
		left: 10%;
		animation-delay: 3s;
	}

	.circle-5 {
		width: 120rpx;
		height: 120rpx;
		top: 20%;
		left: 60%;
		animation-delay: 7s;
	}

	.floating-particle {
		position: absolute;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		animation: float-particle 8s infinite ease-in-out;
	}

	.particle-1 {
		width: 20rpx;
		height: 20rpx;
		top: 30%;
		left: 20%;
		animation-delay: 0s;
	}

	.particle-2 {
		width: 15rpx;
		height: 15rpx;
		top: 60%;
		left: 70%;
		animation-delay: 2s;
	}

	.particle-3 {
		width: 25rpx;
		height: 25rpx;
		top: 80%;
		left: 30%;
		animation-delay: 4s;
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) rotate(0deg) scale(1);
		}

		33% {
			transform: translateY(-30rpx) rotate(120deg) scale(1.1);
		}

		66% {
			transform: translateY(20rpx) rotate(240deg) scale(0.9);
		}
	}

	@keyframes float-particle {

		0%,
		100% {
			transform: translateY(0) translateX(0);
			opacity: 0.5;
		}

		50% {
			transform: translateY(-40rpx) translateX(20rpx);
			opacity: 1;
		}
	}

	.login-card {
		width: 600rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 32rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 25rpx 60rpx rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		position: relative;
		z-index: 2;
	}

	.login-header {
		text-align: center;
		margin-bottom: 70rpx;
	}

	.logo-container {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin: 0 auto 35rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;
		box-shadow: 0 15rpx 40rpx rgba(138, 43, 226, 0.4);
		animation: logo-float 3s ease-in-out infinite;
	}

	@keyframes logo-float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-10rpx);
		}
	}

	.logo-glow {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 160rpx;
		height: 160rpx;
		background: linear-gradient(135deg, #8A2BE2, #9370DB);
		border-radius: 50%;
		opacity: 0.3;
		filter: blur(20rpx);
		animation: glow-pulse 2s ease-in-out infinite;
	}

	@keyframes glow-pulse {

		0%,
		100% {
			opacity: 0.2;
			transform: translate(-50%, -50%) scale(1);
		}

		50% {
			opacity: 0.4;
			transform: translate(-50%, -50%) scale(1.1);
		}
	}

	.logo-icon {
		font-size: 50rpx;
		color: #fff;
	}

	.title {
		display: block;
		font-size: 52rpx;
		font-weight: 700;
		color: #1e293b;
		margin-bottom: 20rpx;
		background: linear-gradient(135deg, #1e293b, #8A2BE2);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.subtitle {
		font-size: 28rpx;
		color: #64748b;
		letter-spacing: 1rpx;
		font-weight: 500;
	}

	.login-form {
		display: flex;
		flex-direction: column;
	}

	.form-row {
		margin-bottom: 45rpx;
	}

	.input-wrapper {
		position: relative;
	}

	.input-icon {
		position: absolute;
		left: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		z-index: 2;
		color: #8A2BE2;
	}

	.input-container {
		position: relative;
	}

	.input {
		height: 90rpx;
		border: 2rpx solid #e2e8f0;
		border-radius: 20rpx;
		padding: 0 80rpx 0 80rpx;
		font-size: 30rpx;
		background: rgba(248, 250, 252, 0.8);
		width: 100%;
		box-sizing: border-box;
		transition: all 0.4s ease;
		color: #1e293b;
		font-weight: 500;
	}

	.input:focus {
		border-color: #8A2BE2;
		background: #fff;
		box-shadow: 0 8rpx 32rpx rgba(138, 43, 226, 0.15);
		transform: translateY(-2rpx);
	}

	.input-line {
		position: absolute;
		bottom: 0;
		left: 80rpx;
		right: 0;
		height: 3rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB);
		transform: scaleX(0);
		transition: transform 0.4s ease;
		border-radius: 3rpx;
	}

	.input-line.active {
		transform: scaleX(1);
	}

	.placeholder {
		color: #94a3b8;
		font-size: 30rpx;
		font-weight: 400;
	}

	/* 忘记密码 */
	.forgot-password {
		text-align: right;
		margin: -20rpx 0 40rpx 0;
		position: relative;
		display: inline-block;
		align-self: flex-end;
	}

	.forgot-text {
		font-size: 26rpx;
		color: #8A2BE2;
		font-weight: 600;
		position: relative;
		z-index: 1;
	}

	.forgot-underline {
		position: absolute;
		bottom: -4rpx;
		left: 0;
		width: 100%;
		height: 2rpx;
		background: #8A2BE2;
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	.forgot-password:active .forgot-underline {
		transform: scaleX(1);
	}

	.forgot-password:active .forgot-text {
		opacity: 0.8;
	}

	/* 登录按钮 */
	.login-btn {
		height: 100rpx;
		background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 100%);
		color: #fff;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 20rpx;
		border: none;
		margin-top: 30rpx;
		width: 100%;
		transition: all 0.4s ease;
		box-shadow: 0 12rpx 30rpx rgba(138, 43, 226, 0.4);
		position: relative;
		overflow: hidden;
	}

	.btn-text {
		position: relative;
		z-index: 2;
	}

	.btn-glow {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, #9370DB 0%, #8A2BE2 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.btn-wave {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.3);
		transform: translate(-50%, -50%);
		animation: wave 1.5s ease-out infinite;
	}

	@keyframes wave {
		0% {
			width: 0;
			height: 0;
			opacity: 1;
		}

		100% {
			width: 300rpx;
			height: 300rpx;
			opacity: 0;
		}
	}

	.login-btn:active {
		transform: translateY(3rpx);
		box-shadow: 0 6rpx 20rpx rgba(138, 43, 226, 0.4);
	}

	.login-btn:active .btn-glow {
		opacity: 1;
	}

	.login-btn[disabled] {
		background: #cbd5e1;
		box-shadow: 0 4rpx 15rpx rgba(203, 213, 225, 0.4);
		transform: none;
	}

	.login-btn[loading] {
		opacity: 0.9;
	}

	/* 注册链接 */
	.register-link {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 45rpx;
		font-size: 28rpx;
		color: #64748b;
		gap: 16rpx;
	}

	.register-text {
		font-weight: 500;
	}

	.link-container {
		position: relative;
		display: inline-block;
	}

	.link {
		color: #8A2BE2;
		font-weight: 700;
		position: relative;
		z-index: 1;
	}

	.link-underline {
		position: absolute;
		bottom: -4rpx;
		left: 0;
		width: 100%;
		height: 3rpx;
		background: linear-gradient(90deg, #8A2BE2, #9370DB);
		border-radius: 2rpx;
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	.link-container:active .link-underline {
		transform: scaleX(1);
	}

	.link-container:active .link {
		opacity: 0.8;
	}

	/* 底部装饰 */
	.bottom-decoration {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		z-index: 1;
	}

	.wave {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200%;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50% 50% 0 0;
		animation: wave-move 10s linear infinite;
	}

	.wave-1 {
		animation-delay: 0s;
		opacity: 0.6;
	}

	.wave-2 {
		animation-delay: -5s;
		opacity: 0.3;
	}

	@keyframes wave-move {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}
</style>